import React, { Component, Fragment } from "react";
import axios from 'axios'
// 多 DOM 动画
import { CSSTransition, TransitionGroup } from 'react-transition-group'

import XiaojiejieItem from "./XiaojiejieItem";

import "./style.css";

class Xiaojiejie extends Component {
  constructor() {
    super();
    this.state = {
      inputValue: "",
      list: ["Kobe", "James"],
    };
  }
  componentDidMount() {
    axios.get('https://www.fastmock.site/mock/21a510471fabc5e57f4ef5267cb2dbf5/reactRedux/taskList').then(response => {
      this.setState({
        list: response.data
      })
    }).catch(error => console.log(error))
  }
  // 生命周期
  /* componentWillMount(){
    console.log('组件挂载前');
  }
  componentDidMount(){
    console.log('组建挂载完成');
  }
  
  shouldComponentUpdate(){
    console.log('更新前调用');
    return true
  }
  componentWillUpdate(){
    console.log('更新中');
  }
  componentDidUpdate(){
    console.log('更新完成');
  } */
  // reader() 不可少
  render() {
    // console.log('组件挂载中');
    return (
      <Fragment>
        {/* 注释 */}
        <p>
          <label htmlFor="input">增加：</label>
          <input
            value={this.state.inputValue}
            onChange={this.inputChange.bind(this)}
            ref={(input) => {
              this.input = input;
            }}
            id="input"
            className="input"
          />
          <button onClick={this.addList.bind(this)}>增加队员</button>
        </p>
        <ul
          ref={(ul) => {
            this.ul = ul;
          }}
        >
          {/* {
            this.state.list.map((item, index) => {
              return <li key={index + item} onClick={this.deleteItem.bind(this, index)}>{item}</li>
            })
          } */}

          {/* html解析 */}
          {/* {
            this.state.list.map((item, index) => {
              return <li key={index + item} onClick={this.deleteItem.bind(this, index)} dangerouslySetInnerHTML={{__html: item}}></li>
            })
          } */}

          <TransitionGroup>
            {/* 组件 */}
            {this.state.list.map((item, index) => {
              return (
                <CSSTransition
                  timeout={1000}
                  classNames="group"
                  appear={true}
                  key={index + item}
                  unmountOnExit
                >
                  <XiaojiejieItem
                    key={index + item}
                    content={item}
                    index={index}
                    deleteItem={this.deleteItem.bind(this)}
                  />
                </CSSTransition>
              );
            })}
          </TransitionGroup>
        </ul>
      </Fragment>
    );
  }
  inputChange(e) {
    // this.state.inputValue = e.target.value  // 报错
    this.setState({
      // inputValue: e.target.value,
      inputValue: this.input.value,
    });
  }
  // 增加列表
  addList(e) {
    // this.setState() 异步
    this.setState(
      {
        list: [...this.state.list, this.state.inputValue],
        inputValue: "",
      },
      () => {
        console.log(this.ul.querySelectorAll('li').length);
      }
    );
    // console.log(this.ul.querySelectorAll('li').length); // 打印的总是少一个
  }
  // 删除
  deleteItem(index) {
    /* // 错误写法
    this.state.list.splice(index, 1)  
    this.setState({
      list: this.state.list
    }) */

    let list = this.state.list;
    list.splice(index, 1);
    this.setState({
      list,
    });
  }
}

export default Xiaojiejie;
